import React from "react"
import GpContainer from "@/components/GpContainer"
import { View } from "@tarojs/components"
import GpMustReadItem from "@/components/GpMustReadItem"
import GpPagination from "@/components/GpPagination"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { cloneDeep, setPageMeta } from "@/utils/common"
import { getExamList } from "@/apis/index"
import Taro from "@tarojs/taro"
import clsx from "clsx"
import GpEmpty from "@/components/GpEmpty"
import GpTopHeader from "../components/GpTopHeader"

const ports = [{ text: "艺考政策" }]
type IState = {
  pagination: IPagination
  list: any[]
}
type IData = {
  keyword?: string
}
/** 艺考政策
 * @deprecated
 */
class ExamStrategy extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      pagination: {
        page: 1,
        pageCount: 1
      },
      list: []
    }
    this.extData = {}
  }
  onLoad() {
    this.searchData(this.extData.keyword)
  }
  onShareAppMessage() {}
  componentDidShow() {
    this.setPageInfo()
  }
  setPageInfo = () => {
    setPageMeta({
      keywords: "艺考政策，艺考最新政策",
      title: "艺考政策-择艺宝",
      description: "艺考政策-择艺宝"
    })
  }
  handlePageChange = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination)
    _pagination.page = page
    this.setState(
      {
        pagination: _pagination
      },
      () => {
        this.searchData(this.extData.keyword)
      }
    )
  }
  searchData = (keyword?: string) => {
    Taro.showLoading()
    this.extData.keyword = keyword
    const { pagination } = this.state
    getExamList({
      pagination: {
        current: pagination.page,
        pageSize: 8
      },
      search: {
        keyword,
        columnId: 2
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          this.setState({
            list: retData.list || [],
            pagination: {
              ...pagination,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 列表 */
  renderList = () => {
    const { list } = this.state
    const len = list.length
    return (
      <View className="mt-20px bg-hex-fff px-30px pt-24px pb-68px">
        <View className="flex flex-col">
          {/* item for loop */}
          {len > 0 ? (
            list.map((l, index) => (
              <GpMustReadItem
                key={l.id}
                mustReadItem={l}
                className={clsx({
                  "mb-48px": index !== len - 1
                })}
              />
            ))
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    const { pagination } = this.state
    return (
      <GpContainer>
        <View>
          {/* 头部 */}
          <GpTopHeader curFilter={3} onSearch={this.searchData} />
          {/* 列表 */}
          {this.renderList()}
          {/* 分液器 */}
          <GpPagination
            onChange={this.handlePageChange}
            pagination={pagination}
            className="mt-20px"
          />
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default ExamStrategy
